<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/assets/view/base/tag.jsp" %>
<!DOCTYPE html>
<head>
    <jsp:include page="/assets/view/common/head-meta.jsp"/>
    <title>mrcode博客,纯markdown程序员博客,博文列表</title>
    <jsp:include page="/assets/view/common/head-ui.jsp"/>
</head>
<body>
<jsp:include page="/assets/view/common/header.jsp"/>
<div class="container">
    <ol class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li class="active">热门文章</li>
    </ol>
    <%-- <link rel="stylesheet" href="/assets/lib/bootstrap/css/bootstrap.css">--%>
    <div class="row">
        <div class="col-lg-9">
            <div class="row">
                <c:forEach items="${articlePage.results }" var="article" varStatus="index">
                    <div class="col-lg-12">
                        <article class="media art-list-box art-fade">
                                <div class="media-left">
                                    <a href="/${article.userAccount}/article/details/${article.id}.html">
                                        <c:choose>
                                            <c:when test="${article.summaryImg != null && article.summaryImg != ''}">
                                                <img class="media-object" src="${article.summaryImg}" <%--style="background-image:url(${article.summaryImg})--%>/>
                                            </c:when>
                                            <c:otherwise>
                                                <img class="media-object" src="/assets/common/image/art-defult.png" alt="${article.title}"/>
                                            </c:otherwise>
                                        </c:choose>
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">
                                        <a href="/${article.userAccount}/article/details/${article.id}.html"
                                                                 title="${article.title}">${article.title}</a>
                                    </h4>

                                    <div class="summary">${article.summary}</div>

                                    <ul class="list-inline autor">
                                        <%--<li><span class="icon-comments"/> ${article.commentNum}</li>--%>
                                        <li><span class="icon-user"/> ${article.userAccount}</li>
                                        <li><span class="icon-eye-open"/> ${article.readNum}</li>

                                        <li><span class="icon-time"/><fmt:formatDate value="${article.createTime}" pattern="yyyy-MM-dd"/>
                                        </li>
                                    </ul>
                            </div>
                        </article>
                        <hr class="section-divider art-list-box-bottom">
                    </div>
                </c:forEach>
                <nav fenye="bootstrap" style="text-align: center">
                    ${articlePage.getBootstrapHtml(10)}
                </nav>
                <form  id="listFrom" action="" method="post">
                    <input type="hidden" id="hi_pageNo" name="pageNo">
                </form>
            </div>
        </div>
        <%--<div class="col-lg-3">
            <jsp:include page="/assets/view/common/left.jsp"/>
        </div>--%>
    </div>
</div>
<jsp:include page="/assets/view/common/footer.jsp"/>
<script src="/assets/js/fenye.js"></script>
<script>
    /*$("#menu-list").addClass("active");*/

    $('nav[fenye="bootstrap"]').bindFanYeEvent(function(pageno){ //绑定点击翻页按钮的处理事件
        $("#hi_pageNo").val(pageno);
        $("#listFrom").submit();
    });
</script>
</body>
</html>
